{include file="common/head"/}
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>{$title}</legend>
    </fieldset>

    <form class="layui-form layui-form-pane" lay-filter="form">
        <!-- <div class="layui-form-item">
             <label class="layui-form-label">类型</label>
             <div class="layui-input-4">
                 <div class="layui-input-inline" style="width: 80%">
                     <input type="radio" name="rule_type" value="0" title="固定规则" checked>
                     <input type="radio" name="rule_type" value="1" title="自由规则">
                 </div>
             </div>
         </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">规则名称</label>
            <div class="layui-input-4">
                <input type="text" name="rule_name" id="rule_name" lay-verify="required" placeholder="{:lang('pleaseEnter')}规则名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">列表排序</label>
            <div class="layui-input-4">
                <input type="number" name="sort" lay-verify="required" placeholder="{:lang('pleaseEnter')}列表排序" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考勤对象</label>
            <div class="layui-input-4">
                <div class="layui-input-inline" style="width: 100%;margin-left: 20px;margin-top: 6px;">
                    <!--  <input type="radio" name="person_type"  lay-filter="all" value="0" title="所有人" checked>
                      <input type="radio" name="person_type"  lay-filter="appoint" value="1" title="特定对象">-->
                    <input type="button" value="添加" id="object" class="layui-btn layui-btn-primary layui-btn-sm">
                </div>
            </div>
        </div>

        <div class="layui-row layui-col-space3 ob hidden"style="margin-bottom: 10px">
            <div class="layui-col-md1">
            </div>
            <div class="layui-col-md5 per" style="margin-left: -22px;">

            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text"  name="start_time"  class="layui-input" id="start_time" placeholder="H：m">
            </div>
            <div class="layui-form-mid layui-word-aux">
                开始打卡时间。
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text"  name="end_time"  class="layui-input" id="end_time" placeholder="H：m">
            </div>
            <div class="layui-form-mid layui-word-aux">
                结束打卡时间。
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">迟到时间</label>
            <div class="layui-input-inline">
                <input type="text"  name="late_max_time"  class="layui-input" id="late_max_time" placeholder="H：m">
            </div>
            <div class="layui-form-mid layui-word-aux">
                迟到结束时间。
            </div>
        </div>

        <!-- <div class="layui-form-item">
             <label class="layui-form-label">打卡时间差</label>
             <div class="layui-input-inline">
                 <input type="number" name="time_gap" lay-verify="required" placeholder="{:lang('pleaseEnter')}最近两次打卡时间差" class="layui-input">
             </div>
             <div class="layui-form-mid layui-word-aux">
                 以分钟为单位。
             </div>
         </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">工作日</label>
            <div class="layui-input-block">
                <input type="checkbox" name="work_time" value="1" lay-skin="primary" title="周一" checked="">
                <input type="checkbox" name="work_time" value="2" lay-skin="primary" title="周二">
                <input type="checkbox" name="work_time" value="3" lay-skin="primary" title="周三">
                <input type="checkbox" name="work_time" value="4" lay-skin="primary" title="周四">
                <input type="checkbox" name="work_time" value="5" lay-skin="primary" title="周五">
                <input type="checkbox" name="work_time" value="6" lay-skin="primary" title="周六">
                <input type="checkbox" name="work_time" value="0" lay-skin="primary" title="周日">
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排除日期</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="sub_workday_start" placeholder="yyyy-MM-dd">
            </div>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="sub_workday_end" placeholder="yyyy-MM-dd">
            </div>
            <input type="button" value="添加" id="sub" class="layui-btn layui-btn-primary layui-btn-sm">
            <input type="button" value="添加节假日" id="holiday" class="layui-btn layui-btn-primary layui-btn-sm">
        </div>

        <div class="layui-row layui-col-space3 su hidden"style="margin-bottom: 10px">
            <div class="layui-col-md1">
            </div>
            <div class="layui-col-md5 sub_workday" style="margin-left: -22px;">
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">增加日期</label>
            <div class="layui-input-inline">
                <input type="text"  class="layui-input" id="add_workday_start" placeholder="yyyy-MM-dd">
            </div>
            <div class="layui-input-inline">
                <input type="text"  class="layui-input" id="add_workday_end" placeholder="yyyy-MM-dd">
            </div>
            <input type="button" value="添加" id="add" class="layui-btn layui-btn-primary layui-btn-sm">
        </div>

        <div class="layui-row layui-col-space3 ad hidden"style="margin-bottom: 10px">
            <div class="layui-col-md1">
            </div>
            <div class="layui-col-md5 add_workday" style="margin-left: -22px;">
            </div>

        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="submit">{:lang('submit')}</button>
                <a href="{:url('lists')}" class="layui-btn layui-btn-primary">{:lang('back')}</a>
            </div>
        </div>
    </form>

</div>
{include file="common/foot"/}

<script>

    // 父窗口变量 用于接收子窗口传递的数据
    var rel="";
    // 存放特定规则对象
    var person = new Array();
    // 存放（工作日外）排除的规则日期
    var sub = new Array();
    // 存放（工作日外）添加的规则日期
    var add = new Array();

    //用于子窗体向父窗体赋值
    function setRel(rel){

        this.rel=rel;

    }

    //删除某一特定规则对象
    function del(i) {

        this.person.splice($.inArray(i,this.person),1);
        $("#sp"+i).remove();
        if(this.person.length==0){
            $(".ob").hide();
        }

    }

    //删除某一（工作日外）排除的规则日期
    function del_sub(i) {

        this.sub[i]='';
        $("#sup"+i).remove();
        for (var i=0;i<this.sub.length;i++){
            if(this.sub[i]!=''){
                return false;
            }
        }
        $(".su").hide();

    }

    //删除某一（工作日外）添加的规则日期
    function del_add(i) {

        this.add[i]='';
        $("#adp"+i).remove();
        for (var i=0;i<this.add.length;i++){
            if(this.add[i]!=''){
                return false;
            }
        }
        $(".ad").hide();

    }

    layui.use(['form','laydate', 'layer','upload'], function () {
        var form = layui.form, layer = layui.layer,$= layui.jquery,upload = layui.upload,laydate = layui.laydate;
        /*  $('#object').hide();*/
        var info = {$info|raw};
        form.val("form", info);
        form.render();

        // 监听特定radio
        /*  form.on('radio(appoint)', function(data){
              if (data.value){
                  $('#object').show();
              }
          });
  */
        // 监听全部radio
        /* form.on('radio(all)', function(data){
             if (data.value){
                 $('#object').hide();
                 $('.ob').hide();
                 this.person='';
             }
         });*/

        // 监听添加特定对象按钮
        $('#object').on('click', function () {

            layer.open({
                title: '选择特定对象'
                ,type: 2
                ,area: ['800px', '800px']
                ,shadeClose : true
                ,content: '{:url("teacher")}'
            });

        });

        $('#holiday').on('click', function () {

            $.post('{:url("holidayEnd")}',{},function (res) {
                console.log(res);
                for(var i = 0;i < res.length; i++){
                    var start =  res[i]['start_time'];
                    var end   = res[i]['end_time'];
                    var name   = res[i]['name'];
                    var time  = start+'/'+end;

                    if($.inArray(time, sub)==-1&&start!=''&&end!=''){
                        var si = sub.length;
                        sub[si] = time;
                        var str1=  '';
                        str1 = str1+"                <span class=\"layui-badge-rim\" id=sup"+si+" style=\"margin-left: 10px;padding-top: 8px;padding-bottom: 8px\">"+name+"："+start+' 至 '+end+"<i class=\"layui-icon\" onclick='del_sub("+si+")'  style='float: right;'>&#x1006;</i> </span>\n";

                        $(".su").show();
                        $(".sub_workday").css('border','solid 1px #f2f2f2');
                        $(".sub_workday").css('border-radius','15px');
                        $(".sub_workday").append(str1);

                        $('#sub_workday_start').val('');
                        $('#sub_workday_end').val('');
                    }
                }

            });
        });
        // 监听添加排除日期的添加按钮
        $('#sub').on('click', function () {

            var start = $('#sub_workday_start').val();
            var end   = $('#sub_workday_end').val();
            var time  = start+'/'+end;

            if($.inArray(time, sub)==-1&&start!=''&&end!=''&&(start<=end)){
                var si = sub.length;
                sub[si] = time;
                var str1=  '';
                str1 = str1+"                <span class=\"layui-badge-rim\" id=sup"+si+" style=\"margin-left: 10px;width: 200px;padding-top: 8px;padding-bottom: 8px\">"+start+' 至 '+end+"<i class=\"layui-icon\" onclick='del_sub("+si+")'  style='float: right;'>&#x1006;</i> </span>\n";

                $(".su").show();
                $(".sub_workday").css('border','solid 1px #f2f2f2');
                $(".sub_workday").css('border-radius','15px');
                $(".sub_workday").append(str1);

                $('#sub_workday_start').val('');
                $('#sub_workday_end').val('');
            }

        });

        // 监听添加增加日期的添加按钮
        $('#add').on('click', function () {

            var start = $('#add_workday_start').val();
            var end   = $('#add_workday_end').val();
            var time  = start+'/'+end;

            if($.inArray(time, add)==-1&&start!=''&&end!=''&&(start<=end)){
                var ai = add.length;
                add[ai] = time;
                var str1=  '';
                str1 = str1+"                <span class=\"layui-badge-rim\" id=adp"+ai+" style=\"margin-left: 10px;width: 200px;padding-top: 8px;padding-bottom: 8px\">"+start+' 至 '+end+"<i class=\"layui-icon\" onclick='del_add("+ai+")'  style='float: right;'>&#x1006;</i> </span>\n";

                $(".ad").show();
                $(".add_workday").css('border','solid 1px #f2f2f2');
                $(".add_workday").css('border-radius','15px');
                $(".add_workday").append(str1);

                $('#add_workday_start').val('');
                $('#add_workday_end').val('');
            }
        });


        // 监听提交按钮
        form.on('submit(submit)', function (data) {
            loading =layer.load(1, {shade: [0.1,'#fff']});

            var late_max_time = $('#late_max_time').val();
            var start_time    = $('#start_time').val();
            var end_time      = $('#end_time').val();

            if(late_max_time!=''&&start_time!=''&&end_time!=''&&(start_time<end_time)&&(end_time<late_max_time)){
                // 获得工作日数组
                var arr = new Array();
                $("input:checkbox[name='work_time']:checked").each(function(i){
                    arr[i] = $(this).val();
                });

                // 提交数据处理
                if(arr==''){
                    var d1 =  '';
                }else{
                    var d1 =  arr;
                }
                if(person==''){
                    var d2 =  '';
                }else{
                    for (var i=0;i<person.length;i++){
                        if(person[i]==''){
                            person.splice(i,1);
                        }
                    }
                    var d2 =  person;
                }
                if(sub==''){
                    var d3 =  '';
                }else{
                    for (var i=0;i<sub.length;i++){
                        if(sub[i]==''){
                            sub.splice(i,1);
                        }
                    }
                    var d3 =  sub;
                }
                if(add==''){
                    var d4 =  '';
                }else{
                    for (var i=0;i<add.length;i++){
                        if(add[i]==''){
                            add.splice(i,1);
                        }
                    }
                    var d4 =  add;
                }

                data.field.work_time = d1;
                data.field.person_type = d2;
                data.field.sub_workday = d3;
                data.field.add_workday = d4;

                $.post("",data.field, function (res) {
                    layer.close(loading);
                    if (res.code > 0) {
                        layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                            location.href = res.url;
                        });
                    } else {
                        layer.msg(res.msg, {time: 1800, icon: 2});
                    }
                });
            }else{
                layer.alert('签到时间有误');
                layer.close(loading);
                return false;
            }


        });
        laydate.render({
            elem: '#start_time'
            ,type: 'time'
            ,format: 'H:m'
        });
        laydate.render({
            elem: '#end_time'
            ,type: 'time'
            ,format: 'H:m'
            ,done: function(value, date){
                if($("#start_time").val()>value){
                    layer.alert('请输入正确的打卡时间！');
                }

            }
        });
        laydate.render({
            elem: '#late_max_time'
            ,type: 'time'
            ,format: 'H:m'
            ,done: function(value, date){
                if($("#start_time").val()<$("#end_time").val()<value){

                }else{
                    layer.alert('请输入正确的打卡时间！');
                }

            }
        });
        laydate.render({
            elem: '#sub_workday_start'
            ,format: 'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#sub_workday_end'
            ,format: 'yyyy-MM-dd'
            ,done: function(value, date){
                var start = $('#sub_workday_start').val();
                if(start==''){
                    layer.alert('请输入正确开始时间！');
                }
                if(value < start){
                    layer.alert('请输入正确结束时间！');
                }

            }
        });
        laydate.render({
            elem: '#add_workday_start'
            ,format: 'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#add_workday_end'
            ,format: 'yyyy-MM-dd'
            ,done: function(value, date){
                var start = $('#add_workday_start').val();
                if(start==''){
                    layer.alert('请输入正确开始时间！');
                }
                if(value < start){
                    layer.alert('请输入正确结束时间！');
                }

            }
        });

        // 监听子窗口对父窗口的数据传递
        setInterval(function () {
            if( this.rel!=''){
                var temp = JSON.parse(this.rel);

                var str = "" ;

                for (var i=0;i<temp.length;i++){

                    if($.inArray(temp[i]['id'], person)==-1){
                        person.push(temp[i]['id']);
                        str = str+"                <span class=\"layui-badge-rim\" id=sp"+temp[i]['id']+" style=\"margin-left: 10px;width: 100px;padding-top: 8px;padding-bottom: 8px\">"+temp[i]['true_name']+"<i class=\"layui-icon\" onclick='del("+temp[i]['id']+")'  style='float: right;'>&#x1006;</i> </span>\n";
                    }
                }
                $(".ob").show();
                $(".per").css('border','solid 1px #f2f2f2');
                $(".per").css('border-radius','15px');
                $(".per").append(str);
                // 表单重新渲染，要不然添加完显示不出来新的option
                form.render();
            }
            this.rel='';
        },3000);

    });


</script>